{% extends 'home.html' %}

{% block right_content %}
    <ol class="breadcrumb">
        <li><a href="{{ url_for('backend_page.home') }}">数据可视化系统</a></li>
        <li><a href="{{ url_for('kingadmin_page.table_list') }}">数据表管理</a></li>
        <li class="active" id="model_name" data="{{ model_name }}">{{ model_name }}表</li>
    </ol>
    <div>
    {% if admin_class.list_filter %}
        <form class="row wrap_search" style="margin-bottom: 5px;">
            <div class="form-group col-md-6" style="float: left">
                <div class="input-group">
                    <input type="text" name="mix_kw" placeholder="请输入{{ '或'.join(admin_class.list_filter) }}"
                           class="form-control"
                           value="{{ search_con.mix_kw }}">
                    <span class="input-group-btn">
                    <button type="button" class="btn btn-primary search">
                        <i class="fa fa-search"></i>搜索
                    </button>
                </span>
                </div>
            </div>
        </form>
    {% endif %}
    <div class="col-md-8" id="fm">
        <div class="row">
            <div class="col-lg-5">
                <select name="action" class="form-control">
                    <option value="">------------</option>
                    <option value="1">删除</option>
                </select>
            </div>
            <div class="col-lg-2">
                <button class="btn btn-info" onclick="ActionCheck(this);">GO</button>
            </div>
        </div>
    </div>
    <div class="col-md-2" style="float: right;">
        <a href="{{ url_for('kingadmin_page.table_model_add', model_name=model_name) }}"
           class="btn btn-warning">
            添加
        </a>
    </div>
    </div>
    <div style="margin-top: 60px;">
    <table class="table table-bordered" id="tb">
        <thead>
        <tr style="background-color: dodgerblue;color: white">
            <th><input type="checkbox" onclick="CheckAllObjs(this);"></th>
            {% if admin_class.list_display %}
                {% for column in admin_class.list_display %}
                    <th>{{ column }}
                    </th>
                {% endfor %}
            {% else %}
                <th>{{ model_name }}</th>
            {% endif %}
            <th class="col-lg-3">操作</th>
        </tr>
        </thead>
        <tbody>
        {% for obj in datasets %}
            <tr nid="{{ obj.id }}">
                <td><input row-select="true" type="checkbox" value="{{ obj.id }}"></td>
                {% if admin_class.list_display %}
                    {% for column in admin_class.list_display %}
                        <td>{{ get_obj_attr(obj,column) }}</td>
                    {% endfor %}
                {% else %}
                    <td>{{ obj }}</td>
                {% endif %}
                <td class="col-md-2">
                    <a href="{{ buildUrl('/kingadmin/table_list/{}/{}'.format(model_name, obj.id)) }}"><i
                            class="fa fa-eye" style="color: green" aria-hidden="true"></i>&nbsp;&nbsp;view</a>
                    &nbsp;|&nbsp;
                    <a href="{{ buildUrl('/kingadmin/table_list/{}/{}/edit'.format(model_name, obj.id)) }}"><i
                            class="fa fa-pencil" style="color: gold"></i>&nbsp;&nbsp;change</a>
                    &nbsp;|&nbsp;
                    <a nid="{{ obj.id }}" data="{{ model_name }}" id="del-btn" style="cursor: pointer"><i
                            class="fa fa-trash" style="color: red"></i>&nbsp;&nbsp;delete</a>
                </td>
            </tr>
        {% endfor %}

        <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">删除</h4>
                    </div>
                    <div class="modal-body">
                        确认删除这条数据 &nbsp;<span style="font-size: 24px;" id="del-class-name" nid=""></span>？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" id="del-confirm">确认删除</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="delIdsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">删除</h4>
                    </div>
                    <div class="modal-body">
                        确认删除这些数据吗 &nbsp;<span style="font-size: 24px;" id="del-class-name" nid=""></span>？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" id="del-ids-confirm">确认删除</button>
                    </div>
                </div>
            </div>
        </div>
        </tbody>
    </table>
    <ul class="pagination">
        {% if page_obj.num_pages > 1 %}
            {{ page_str }}
        {% else %}
        {% endif %}
    </ul>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(function () {
            bindDel();
            bindDelConfirm();
            account_index_ops.init();
        });
        var account_index_ops = {
            init: function () {
                this.eventBind();
            },
            eventBind: function () {
                var that = this;
                $('.wrap_search .search').click(function () {
                    $('.wrap_search').submit();
                });
            },
        };
        function ActionCheck(self) {
            var selected_action = $('select[name="action"]').val();
            var selected_objs = $("input[row-select]:checked");
            {#var selected_objs = $('input[row-select]').filter(':checked');#}
            if (!selected_action) {
                alert('no action selected');
                return false
            }
            if (selected_objs.length == 0) {
                alert('no objects selected');
                return false
            } else {
                //生成一个标签，放到form里
                var ele = '<input type="hidden" >';
                var selected_ids = [];
                $.each(selected_objs, function () {
                    //console.log($(this));
                    selected_ids.push($(this).val());
                });
                var input_ele = '<input type="hidden" name="selected_ids" value=' + JSON.stringify(selected_ids) + '>';
                $(self).append(input_ele);
                $('#delIdsModal').modal('show');
                $('#del-ids-confirm').click(function () {
                    sendDelIds(selected_ids);
                })
                //common_ops.confirm('确认删除选中的数据吗？', sendDelIds(selected_ids));
            }
        }

        function sendDelIds(ids) {
            $('#delIdsModal').modal('hide');
            $.ajax({
                type: 'POST',
                data: {'selected_ids': JSON.stringify(ids)},
                dataType: 'JSON',
                traditional: true,
                success: function (arg) {
                    var callback = null;
                    console.log(arg)
                    if (arg.code == 1000) {
                        callback = function () {
                            window.location.reload();
                        }
                    }
                    common_ops.alert(arg.msg, callback)
                }
            })
        }

        function bindDel() {
            $('#tb').on('click', '#del-btn', function () {
                var id = $(this).attr('nid');
                $('#del-class-name').attr('nid', id);
                $('#delModal').modal('show');
            });
        }

        function bindDelConfirm() {
            $('#del-confirm').click(function () {
                var id = $('#del-class-name').attr('nid');
                var model_name = $('#model_name').attr('data');
                var url = "/kingadmin/table_list/" + model_name + "/" + id + "/delete";
                console.log(url);
                $.ajax({
                    url: url,
                    type: 'POST',
                    dataType: 'JSON',
                    success: function (arg) {
                        $('#delModal').modal('hide');
                        if (arg.code == 1000) {
                            $('tr[nid="' + id + '"]').remove();
                        }
                        // common_ops.alert(arg.msg, callback);
                        layer.msg('删除成功')
                    }
                })
            })
        }

        function CheckAllObjs(self) {
            if ($(self).prop('checked')) {
                $('input[row-select]').prop('checked', true);
            } else {
                $('input[row-select]').prop('checked', false);
            }
        }

    </script>
{% endblock %}